﻿@page "/History"
<PageTitle>社团活动 - 西建大iOS Club</PageTitle>

<div style="text-align: center;">
    <Image Preview="false" Style="width: 40%;" Src="/Centre/History.jpg"/>
    <Flex Align="center" Justify="center">
        <div class="gradient-text">iOS Club的历史</div>
    </Flex>
    <Paragraph Style="font-size: 22px" Strong Type="secondary">"历史是时代的见证"</Paragraph>
</div>

<Flex Justify="center" Align="center">
    <GridRow Class="block" Gutter="(20, 24)">
        @foreach (var item in Cards)
        {
            <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="12" Xxl="12">
                <a href="@item.Url" target="_blank">
                    <Card Hoverable Class="card" Bordered="false">
                        <h1 style="margin-top: 10px;margin-bottom: 10px;">@item.Title</h1>
                        <Paragraph Type="secondary">@item.Content</Paragraph>
                    </Card>
                </a>
            </GridCol>
        }
    </GridRow>
</Flex>

@code
{
    private record CardModel(string Title, string Content, string Url);

    private static CardModel[] Cards =>
    [
        new CardModel("总述", "我们社团从何而来，又要到哪里去，这是一个值得思考的问题",
            "/Article/History-Overview"),
        new CardModel("创社时代", "社团的开始总是有着一段传奇故事",
            "/Article/History-Founding"),
        new CardModel("邵韩之治", "解决完社团的初步建设，接下来就要进行社团的发展了",
            "/Article/History-Shao Han's Reign")
    ];
}

<style>
    .block{
        width: 80%;
        margin-top: 45px;
        margin-bottom: 45px;
    }
    .card {
        margin: 10px;
        height: 200px;
        max-width: 100%;
        border-radius: 10px;
        background: #ffffff;
    }
</style>